<template>
  <div class="matrix-box">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr v-for="(line, index) in list" :key="index">
        <td v-for="site in line" class="site-box" v-bind:key="site.jobId"
         v-bind:style="{ 'padding-top' : 100 / line.length +'%'}">
          <router-link class="site-cont"
            :to="{name:'introduction',params:{id: site.jobId}}">
            <span>{{site.jobName}}</span>
            <div class="circle-box" v-if="site.state !== 0">
              <div class="circle-cont" v-bind:style="{background:color[site.state]}">
                <span>{{site.jobName}}</span>
              </div>
              <p class="site-group">{{groupname[site.state]}}</p>
            </div>
          </router-link>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'matrix',
  data () {
    return {
      color: ['', '#E91E63', '#FF6600', '#2196F3', '#FFEB3B', '#FFCFC2', '#BBED93', '#FF00FF', '#6F6F67', '#8DC41F', '#795548', '#607D8B'],
      groupname: ['Team Admin', '佩奇队', '全职高手队', '那强那稳队', '春游队', '逢春队', 'DJ喜洋洋队', '农药队', '吃鸡队', '大鹏队'],
      list: [],
      timer: null
    }
  },
  created () {
    this.getSiteList()
    this.timer = setInterval(() => {
      this.getSiteList()
    }, 30000)
  },
  methods: {
    getSiteList: function () {
      this.$http.get('/server/index/allJobsInfo')
        .then(function (res) {
          this.list = res.data.data
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.matrix-box{
  width: 100%;
  background: rgba(0,0,51,.8);
}
.matrix-box>table tr td{
  border: 1px solid #fff;
}
.site-box{
  position: relative;
  color: #fff;
  font-size: 20px;
}
.site-cont{
  position: absolute;
  top:0;
  left: 0;
  right:0;
  bottom:0;
}
.site-cont>span{
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  line-height: 20px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
}
.site-cont>span:after,.circle-cont:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
.circle-box{
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  padding:5px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
}
.circle-cont{
  height: 100%;
  line-height: initial;
  border-radius: 50%;
  color: #000;
  background: #fff;
  box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;
}
.circle-cont>span{
  font-size: 18px;
  font-weight: 600;
}
.site-group{
  position: absolute;
  display: block;
  top: 50%;
  font-size: 12px;
  padding-right: 10px;
  width: 100%;
  height: 26px;
  line-height: 26px;
  text-align: center;
  box-sizing: border-box;
  color: #273133;
}
</style>
